import { useState } from "react";
import { marked } from "marked";

const MdEditor = ({ renderHtml, onChange, style }: any) => {
  const [value, setValue] = useState("");
  function handleChange(event: any) {
    setValue(event.target.value);
    onChange &&
      onChange({
        // 经过 marked 转换的内容
        html: marked(event.target.value),
        text: event.target.value,
      });
  }

  return (
    <div style={style} className={"md-editor"}>
      <div className={"md-editor__left"}>
        {/*  编辑区域*/}
        <textarea value={value} onChange={handleChange} />
      </div>
      <div className={"md-editor__right"}>
        {/* 展示区域 */}
        {/*<div dangerouslySetInnerHTML={{ __html: value }}></div>*/}
        {renderHtml(marked(value))}
      </div>
    </div>
  );
};

export default MdEditor;
